<template>
	<div>
		<div class="dk">
			<div class="ktop">
				<img :src="privile.coverImgUrl" alt="" />
				<div class="left">
					<img :src="privile.coverImgUrl"/>
				</div>
				<div class="right">
					<p>{{privile.name}}</p>
					<div class="xtu">
						<img :src="creato.avatarUrl"/>
						<span>{{creato.nickname}}</span>
					</div>
				</div>
			</div>
			<div class="kbutton">
				
				<div class="bq">
					<span>标签：</span><span class="bqk" v-for="(r,i) in privile.tags" :key="i">{{r}}</span>
				</div>
				<div class="bq">
					<span>简介：</span><span>{{privile.description}}</span>
				</div>
				
			</div>
		</div>
		<div class="gqlb">
			<p>歌曲列表</p>
		</div>
		<div class="lb" v-for="(r,i) in privileges" :key="i" @click="tobf(r.id)">
			<p>{{r.name}}</p>
			<span v-for="(s,i) in r.ar">{{s.name}}</span>--<span>{{r.al.name}}</span>
			<div class="icon">
     			  <i class="iconfont icon-bofang"></i>
     		</div>
		</div>
	</div>
	
</template>

<script>
	import axios from "axios";
export default {
	created(){
		var that=this;	
		console.log(this.$route.query.gedanid);
		this.gdid=this.$route.query.gedanid;
   	 axios.get("http://netease.bluej.cn/playlist/detail/?id="+this.gdid
   	 ).then(function(res){
		console.log(res);
		that.privileges=res.data.playlist.tracks;
		that.privile=res.data.playlist;
		that.creato = res.data.playlist.creator;
		})
	},
	
	data(){
		return{
			privileges:[],
			privile:"",
			creato:"",
			gdid:0
		}
	},
   methods:{
	tobf(bfId){
      this.$router.push( { path:"/bofang",query:{bfid : bfId} } );
   		}
	}
}
</script>

<style lang="scss">
	.dk{
		width: 100%;
		/*height: 70vw;*/
		/*background: #F8F8F8;*/
		/*z-index: -5;*/
	}
	.ktop{
		width: 100%;
		height: 45vw;
		position: relative;
		overflow: hidden;
		>img{
			position: absolute;
			z-index: -1;
			width: 110%;
			filter: blur(25px);
		}
	}
	.left{
		width: 30%;
		height: 70%;
		display: inline-block;
		margin: 20px 10px;
	}
	img{
		width: 100%;
		height: 100%;
	}
	.right{
		display: inline-block;
		position: absolute;
		top: 20px;
		p{
			top: 30px;
			color: white;
			font-size: 17px;
			margin-bottom: 50px;
		}
		.xtu{
			height: 50px;
			line-height: 50px;
			img{
			width: 30px;
			top: 5px;
			height: 30px;
			border-radius: 50%;
			}
			span{
				color: #f3f3f3;
			}
		}
	}
	.kbutton{
		/*height: 25vw;*/
		background: #f8f8f8;
		.bq{
			padding: 10px;
			.bqk{
				border-radius: 25%;
				font-size: 14px;
				border: 1px solid #0000001c;
			}
		}
	}
	.gqlb{
		background: #EEEFF0;
		padding: 5px;
	}
	.lb{
		padding: 10px;
		background: #f8f8f8;
		border-bottom: 1px solid #EEEFF0;
		.icon{
					display: inline-block;
					position: absolute;
					right: 20px;
					margin-top: -15px;
				}
				.icon-bofang{
						font-size: 25px;
						opacity :0.4
					}
	}
</style>